<template>
  <div class="list-wrap">
    <div class="title">智能推荐报告</div>
    <div class="tip">
      平台根据您填写的简历信息提供政策智能匹配服务,最终申报结果以政府公示为准。
    </div>
    <div class="total">
      推荐符合条件的政策:
      <span class="total-num">{{ total }}条</span>
    </div>
    <div class="tabs">
      <div
        class="tabs-item"
        v-for="(item, index) in tabs"
        :key="index"
        :class="{ active: currentTab === item.key }"
        @click="tabChange(item.key)"
      >
        {{ index }}（{{ item.num }}）
      </div>
    </div>
    <div class="list" v-loading="loading">
      <div
        class="list-item"
        v-for="(item, index) of listData"
        :key="index"
        @click="handleDetail(item)"
      >
        <div class="list-item-top">
          <div class="list-item-top-left">
            <span class="list-item-top-left-level"
              >【{{ item.policyLevel }}】</span
            >{{ item.name }}
          </div>
          <div class="list-item-top-right">
            <div class="list-item-top-right-tag">
              匹配度:{{ getCompare(item.comparePercent) }}
            </div>
            <div class="list-item-top-right-time">
              <div
                class="list-item-top-right-time-icon"
              ></div>
              {{ getTime(item.startTime, item.endTime) }}
            </div>
          </div>
        </div>
        <div class="list-item-tag">
          <div class="list-item-tag-item">
            {{ item.policyType }}
          </div>
        </div>
        <div class="list-item-content">
          <span class="list-item-content-label"
            >发布日期：</span
          >
          <span class="list-item-content-val">{{
            item.publishTime
          }}</span>
        </div>
        <div class="list-item-content">
          <span class="list-item-content-label"
            >发布单位：</span
          >
          <span class="list-item-content-val">{{
            item.policyDepart
          }}</span>
        </div>
      </div>
    </div>
    <div class="pagination" v-if="listTotal">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="parameter.pageSize"
        @current-change="pageChange"
        :total="listTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getDictOptions } from '@/utils/dict'
import {
  queryCompare,
  queryGroupByCompare
} from '@/api/PolicyManage'
import Moment from 'moment'
export default {
  data() {
    return {
      total: 0,
      tabs: {
        全部: {
          key: '',
          num: 0
        }
      },
      currentTab: '',

      loading: false,
      parameter: {
        policyLevel: '',
        pageIndex: 1,
        pageSize: 5
      },
      listTotal: 0,
      listData: []
    }
  },
  mounted() {
    this.initOptions()
  },
  methods: {
    async initOptions() {
      const data = await getDictOptions('zhjs_policy_zcjb')
      data.forEach((element) => {
        this.tabs[element.dictText] = {
          key: element.dictValue,
          num: 0
        }
      })
    },
    async getStatistics(param) {
      // 初始化
      for (let key in this.tabs) {
        this.tabs[key].num = 0
      }
      queryGroupByCompare(param).then((res) => {
        if (res.success) {
          let sum = 0
          res.data.forEach((item) => {
            this.tabs[item.type].num = item.total
            sum += item.total
          })
          this.tabs['全部'].num = sum
          this.total = sum
        }
      })
    },

    getList(param) {
      this.loading = true
      if (param) {
        this.parameter = { ...this.parameter, ...param }
      }
      try {
        queryCompare(this.parameter).then((res) => {
          if (res.success) {
            this.listTotal = res.data.count
            this.listData = res.data.list
          }
          this.loading = false
        })
      } catch (error) {
        this.loading = false
      }
    },

    pageChange(page) {
      this.parameter.pageIndex = page
      this.getList()
    },

    tabChange(key) {
      this.parameter.policyLevel = key
      this.parameter.pageIndex = 1
      this.getList()
    },
    handleDetail(item) {
      this.$emit('detail', item.pkid)
    },
    getCompare(val) {
      const value = parseFloat(val)
      if (value >= 0.6) {
        return '高'
      } else if (value >= 0.3) {
        return '中'
      } else {
        return '低'
      }
    },
    getTime(startTime, endTime) {
      const isBet = Moment().isBetween(startTime, endTime)
      if (isBet) {
        return '申报期内'
      } else {
        return '申报期外'
      }
    }
  }
}
</script>
<style lang="scss">
.list-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: #f6f9fc;
  .title {
    font-size: 30px;
    line-height: 30px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000000;
    margin: 35px 0;
  }
  .tip {
    font-size: 18px;
    line-height: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ff4d4d;
    opacity: 0.8;
  }
  .total {
    font-size: 24px;
    line-height: 24px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #3c3c3c;
    margin: 25px 0;
    &-num {
      color: #ff4d4d;
    }
  }
  .tabs {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 25px 40px;
    &-item {
      font-size: 16px;
      line-height: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
      margin-right: 40px;
      &.active {
        color: #00d2ff;
      }
    }
  }
  .list {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30px;
    &-item {
      width: 100%;
      height: 173px;
      background: #ffffff;
      border: 1px solid #f2f6fb;
      box-sizing: border-box;
      padding: 26px 18px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 18px;
      cursor: pointer;
      &-top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &-left {
          font-size: 16px;
          line-height: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
          margin-left: -4px;

          &-level {
            color: #3e6f8f;
          }
        }
        &-right {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          &-tag {
            width: 75px;
            height: 28px;
            background: rgba(255, 77, 77, 0.1);
            border-radius: 4px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ff4d4d;
            margin-right: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          &-time {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            &-icon {
              width: 12px;
              height: 12px;
              background: url('~@/assets/img/zck/time.png')
                no-repeat;
              background-size: 100% 100%;
              margin-right: 7px;
            }
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #3c3c3c;
          }
        }
      }
      &-tag {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        &-item {
          width: 68px;
          height: 28px;
          background: rgba(0, 210, 255, 0.1);
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #497fa3;
          font-size: 14px;
          line-height: 14px;
          font-family: PingFang SC;
          font-weight: 500;
        }
      }
      &-content {
        font-size: 14px;
        line-height: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        &-label {
          color: #3c3c3c;
        }
        &-val {
          color: #666666;
        }
      }
    }
  }
  .pagination {
    width: 100%;
    box-sizing: border-box;
    padding: 0 30px 20px 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    ::v-deep {
      .el-pagination {
        padding: 0;
        .btn-next {
          margin-right: 0;
        }
      }
      .active {
        background: #f6f9fc !important;
        color: #00baff !important;
      }
      button {
        border: 1px solid #ebf1f8 !important;
        background: white !important;
        color: #a7adb5 !important;
      }
      li {
        background: white !important;
        color: #00baff !important;
        border: 1px solid #ebf1f8;
        border-radius: 2px;
        font-weight: 400 !important;
        font-size: 12px !important;
        line-height: 25px !important;
      }
    }
  }
}
</style>
